
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DEMO</title>
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="assets/css/jquery-ui.css" />
    <!-- fonts -->
    <link rel="stylesheet" href="assets/css/ace-fonts.css" />


    <link rel="stylesheet" href="css/bootstrap-editable.css" />
    <link rel="stylesheet" href="css/jquery.gritter.css" />
    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="css/ace.css">
    <link rel="stylesheet" href="css/ace-l.css">
    <style type="text/css">
        .ltext {
            width: 280px;height: 60px;
        }
    </style>
</head>
<body>
<div class="row" style="margin: 0px;overflow:auto;">
    <div id="dialog-confirm" class="hide">
        <div class="alert alert-info bigger-110">
            删除后将无法恢复,请确认您的操作.
        </div>
        <div class="space-6"></div>
        <p class="bigger-110 bolder center grey">
            <i class="ace-icon fa fa-hand-o-right blue bigger-120"></i>
            是否确定删除?
        </p>
    </div><!-- #dialog-confirm -->
    <div id="dialog-message" class="hide">
        <div class="form-group">
            <span class="col-sm-2 label label-lg label-primary arrowed-right">选择类型</span>
            <div class="radio col-sm-9">
                <label>
                    <input name="addtype"  type="radio" class="ace" checked="checked" value="0">
                    <span class="lbl">人员</span>
                </label>
                <label>
                    <input name="addtype"  type="radio" class="ace" value="1">
                    <span class="lbl">部门</span>
                </label>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="space-2" style="border-bottom:1px solid #CCC"></div>
        <form class="form-horizontal" role="form" id="addForm">
            <input type="hidden" id="isOrgan" name="isOrgan">
            <input type="hidden" id="parentId" name="parentId">
            <div class="space-4"></div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="name" id="user-name"> 姓名 </label>
                <div class="col-sm-9">
                    <span class="input-icon">
                    <input type="text" id="name" name="name" class="iname">
                    <i class="ace-icon fa fa-user blue"></i>
                    </span>
                </div>
            </div>
            <div id="form-hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="workAddr"> 工作单位 </label>

                <div class="col-sm-9">
                    <span class="input-icon">
                    <input type="text" id="workAddr" name="workAddr" style="width: 280px">
                    <i class="ace-icon fa fa-building-o  light-orange"></i>
                    </span>
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="phoneNum"> 电话号码 </label>

                <div class="col-sm-9">
                    <span class="input-icon">
                    <input type="text" id="phoneNum" name="phoneNum">
                    <i class="ace-icon fa fa-phone light-blue"></i>
                    </span>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="email"> 邮箱 </label>

                <div class="col-sm-9">
                    <span class="input-icon">
                    <input type="text" id="email" name="email">
                    <i class="ace-icon fa fa-envelope-o light-blue"></i>
                    </span>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="qq"> QQ </label>

                <div class="col-sm-9">
                    <span class="input-icon">
                    <input type="text" id="qq" name="qq">
                    <i class="ace-icon fa fa-qq light-blue"></i>
                    </span>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="otherInfomation"> 其他联系方式 </label>

                <div class="col-sm-9">
                    <input type="text" id="otherInfomation" name="otherInfomation" placeholder="" class="col-xs-5" />
                </div>
            </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="remark">备注</label>

                <div class="col-sm-9">
                    <textarea class="ltext"  id="remark" name="remark" placeholder=""></textarea>
                </div>
            </div>
            <button  type="reset" id="addReset"></button>
        </form>
    </div>
    <div class="col-sm-6" style="width: 26%;float: left;">
        <div class="widget-box">
            <div class="widget-header header-color-dark">
                <h4 class="lighter smaller">部门通讯录</h4>
            </div>
            <div class="widget-body">
                <div class="widget-main" style="overflow:auto;" id="widget-main">
                    <span class="input-icon input-icon-right">
                        <input type="text" id="tree-search">
                        <i class="ace-icon fa fa-search"></i>
                    </span>
                    <ul id="tree" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
    <div style="width: 73%;float: left;">
        <div id="top-content">
            <div class="space-10"></div>
            <div class="alert alert-info">
                <button type="button" class="close" data-dismiss="alert">
                    <i class="ace-icon fa fa-times"></i>
                </button>

                请点击左侧通讯录树,查看具体人员信息.
                <br>
            </div>
        </div>
        <div class="page-content" id="left-page" style="display: none">
            <div class="row">
                <div class="col-xs-12">
                    <!-- PAGE CONTENT BEGINS -->
                    <div id="user-profile-2" class="user-profile">
                        <!--search input-->
                        <div class="wyInput" id="myInput">
                            <div class="wyinput-group">
                                <input id="search" type="text" class="form-control" placeholder="请输入要搜索的内容" />
                                <a href="#" class="wyinput-btn">搜 索</a>
                            </div>
                        </div>
                        <div class="tabbable">
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a data-toggle="tab" href="#home" id="home-content">
                                        <i class="green ace-icon fa fa-user bigger-120"></i>
                                        个人信息
                                    </a>
                                </li>

                                <li>
                                    <a data-toggle="tab" href="#feed" id="feed-content">
                                        <i class="orange ace-icon fa fa-pencil-square-o bigger-120"></i>
                                        信息修改
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content" id="contents">

                            </div>
                        </div>
                    </div>
                    <!-- PAGE CONTENT ENDS -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div>
    </div>
</div>

<script src="js/jquery-1.4.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootbox.js"></script>
<script src="js/jquery.ztree.all-3.5.js"></script>
<script src="js/jquery.ztree.core-3.5.js"></script>
<script src="js/jquery.ztree.exedit-3.5.js"></script>
<script src="js/jquery.ztree.exhide-3.5.js"></script>

<script src="js/bootstrap-editable.js"></script>
<script src="js/ace-editable.js"></script>
<script src="assets/js/jquery.gritter.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script src="js/ace-elements.js"></script>

<script src="js/ace.widget-box.js"></script>
<script src="js/ace.js"></script>
<script src="js/ace-l.js"></script>

<script src="js/template-web.js"></script>
<script src="js/img-l.js"></script>
<script src="js/index-l.js"></script>
<script src="js/tree-l.js"></script>
<script src="js/search-l.js"></script>

<script type="text/javascript">
    var host = "http://10.47.0.94:9999";
    jQuery(function($){
        changeTreeHeight();

    });

    function changeTreeHeight(){
        var tree = $("#widget-main");
        var leftPage = $("#left-page");
        var height =document.documentElement.clientHeight;
        tree.css("max-height",height - 50);
        leftPage.css("max-height",height - 50);
        tree.css("min-height",500);
        leftPage.css("min-height",500);
    }
</script>
</body>
</html>
<script id="innerHtm" type="text/html">
    <div id="home" class="tab-pane in active">
        <div class="row">
            <div class="col-xs-12 col-sm-3 center">
                    <span class="profile-picture">
                        <img data-pk="{{id}}" class="img-responsive"  alt="Alex's Avatar" id="avatar" src="{{imgFile}}"
                             style="width: 180px;height: 200px"/>
                    </span>

                <div class="space space-4 "></div>

                <a href="#" class="btn btn-sm btn-block btn-primary">
                    <i class="ace-icon fa fa-plus-circle bigger-120"></i>
                    <span class="bigger-110">添加到个人通讯录</span>
                </a>
            </div><!-- /.col -->

            <div class="col-xs-12 col-sm-9">
                <!--<h4 class="blue">
                    <span class="middle">{{name}}</span>

                    <span class="label label-purple arrowed-in-right">
                                        <i class="ace-icon fa fa-circle smaller-80 align-middle"></i>
                                        online
                                    </span>
                </h4>-->
                <div class="width-20 label label-info label-xlg arrowed-in arrowed-in-right">
                    <div class="inline position-relative">
                        <i class="ace-icon fa fa-circle light-green"></i>
                        &nbsp;
                        <span class="white">{{name}}</span>
                    </div>
                </div>
                <div class="space-14"></div>
                <div class="profile-user-info">


                    <div class="profile-info-row">
                        <div class="profile-info-name">
                            工作单位 <i class="middle ace-icon fa fa-building-o bigger-150 light-orange"></i>
                        </div>

                        <div class="profile-info-value">
                            <i class="fa fa-map-marker light-orange bigger-110"></i>
                            <span>{{workAddr}}</span>
                        </div>
                    </div>

                    <div class="profile-info-row">
                        <div class="profile-info-name">
                            联系电话 <i class="middle ace-icon fa fa-phone bigger-150 light-blue"></i>
                        </div>

                        <div class="profile-info-value">
                            <span>{{phoneNum}}</span>
                        </div>
                    </div>

                    <div class="profile-info-row">
                        <div class="profile-info-name">
                            邮箱 <i class="middle ace-icon fa fa-envelope-o bigger-140 light-blue"></i>
                        </div>

                        <div class="profile-info-value">
                            <span>{{email}}</span>
                        </div>
                    </div>

                    <div class="profile-info-row">
                        <div class="profile-info-name">
                            QQ <i class="middle ace-icon fa fa-qq bigger-140 light-blue"></i>
                        </div>

                        <div class="profile-info-value">
                            <span>{{qq}}</span>
                        </div>
                    </div>
                </div>

                <div class="hr hr-8 dotted"></div>

                <div class="profile-user-info">
                    <div class="profile-info-row">
                        <div class="profile-info-name">
                            其他联系方式 <i class="middle ace-icon fa fa-volume-control-phone bigger-140 blue"></i>
                        </div>

                        <div class="profile-info-value">
                            <span>{{otherInfomation}}</span>
                        </div>
                    </div>

                    <div class="profile-info-row">
                        <div class="profile-info-name">
                            <i class="middle ace-icon fa fa-facebook-square bigger-150 blue"></i>
                        </div>

                        <div class="profile-info-value">
                            <a href="#">Find me on Facebook</a>
                        </div>
                    </div>
                </div>
            </div><!-- /.col -->
        </div><!-- /.row -->

        <div class="space-10"></div>

        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <div class="widget-box transparent">
                    <div class="widget-header widget-header-small">
                        <h4 class="widget-title smaller">
                            <i class="ace-icon fa fa-check-square-o bigger-110"></i>
                            备注
                        </h4>
                    </div>

                    <div class="widget-body">
                        <div class="widget-main">
                            <p>
                                {{remark}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /#home -->

    <div id="feed" class="tab-pane">
        <div class="form-group">
            <div class="col-xs-5">
                <label class="col-sm-5 control-label no-padding-right">
                    <input name="switch-field-1" class="ace ace-switch ace-switch-7" id="disable-check" type="checkbox">
                    <span class="lbl"></span>
                    <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right" data-content="点击解锁表单" id="help-span">?</span>
                </label>
            </div>
        </div>
        <form class="form-horizontal" role="form" id="edit-form">
            <input type="hidden" id="id" name="id" value="{{id}}">
            <div class="clearfix"></div>
            <div class="space-4"></div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="name"> 姓名 </label>
                <div class="col-sm-9">
                        <span class="input-icon">
                        <input type="text" id="name" name="name" value="{{name}}">
                        <i class="ace-icon fa fa-user blue"></i>
                        </span>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="workAddr"> 工作单位 </label>

                <div class="col-sm-9">
                    <span class="input-icon">
                    <input type="text" id="workAddr" style="width: 280px" name="workAddr" value="{{workAddr}}">
                    <i class="ace-icon fa fa-building-o  light-orange"></i>
                    </span>
                </div>
            </div>

            <!-- /section:elements.form -->
            <div class="space-4"></div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="phoneNum"> 电话号码 </label>

                <div class="col-sm-9">
                    <span class="input-icon">
                    <input type="text" id="phoneNum"  name="phoneNum" value="{{phoneNum}}">
                    <i class="ace-icon fa fa-phone light-blue"></i>
                    </span>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="email"> 邮箱 </label>

                <div class="col-sm-9">
                    <span class="input-icon">
                    <input type="text" id="email"  name="email" value="{{email}}">
                    <i class="ace-icon fa fa-envelope-o light-blue"></i>
                    </span>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="qq"> QQ </label>

                <div class="col-sm-9">
                    <span class="input-icon">
                    <input type="text" id="qq" name="qq" value="{{qq}}">
                    <i class="ace-icon fa fa-qq light-blue"></i>
                    </span>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="otherInfomation"> 其他联系方式 </label>

                <div class="col-sm-9">
                    <input type="text" id="otherInfomation"  name="otherInfomation" value="{{otherInfomation}}" class="col-xs-5" />
                </div>
            </div>
            <div class="space-4"></div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="remark">备注</label>

                <div class="col-sm-9">
                    <textarea class="ltext"  id="remark" name="remark">{{remark}}</textarea>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="clearfix">
                <div class="col-md-offset-3 col-md-9">
                    <button class="btn btn-info" type="button" id="updSubmit">
                        <i class="ace-icon fa fa-check"></i>
                        保存
                    </button>
                    &nbsp; &nbsp; &nbsp;
                    <button class="btn" type="reset" id="updReset">
                        <i class="ace-icon fa fa-undo bigger-110"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div><!-- /#feed -->
</script>